<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>微信外卖</title>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet" href="css/wm.css">
</head>
<body>
     <div class="top">
        <div class="top_left"><img src="images/icon_back.png" alt=""></div>
        微信外卖
    </div>
   <div class="top_m">
        <ul>
            <li>
                <div>菜单</div>
            </li>
            <li class="top_m_on">
                <div style="border-left:1px solid #CDCCCA;border-right:1px solid #CDCCCA;">评价</div>
            </li>
            <li>
                <div>详情</div>
            </li>
        </ul>
    </div>   
    <div class="top3">
       <img class="top3_img1" src="images/wxwm_icon_laba.png" alt="">
       接受订单中,开始送餐。
       <img class="top3_img2" src="images/arrow_right.png" alt="">
    </div>

    
    <div class="bottom_m">
        <div class="bottom_m_left">
            <ul>
                <li class="leftulli_on"><div>热销</div></li>
                <li class="leftulli_off"><div>饮品</div></li>
                <li class="leftulli_off"><div>翻糖</div></li>
                <li class="leftulli_off"><div>蛋糕</div></li>
                <li class="leftulli_off"><div>甜品</div></li>
                <li class="leftulli_off"><div>面包</div></li>
            </ul>
        </div>
        <div class="bottom_m_right">
            <ul>
                <li class="bottom_m_right_li bottom_m_right_li_on animated ">
                    <div class="bottom_m_right_top">热销产品</div>
                    <div class="g_list">
                    <ul>
                        <li>
                            <div class="g_list_img"><img src="images/wxwm_img02.png" alt=""></div>
                            <div class="g_right">
                                <p class="goods_name">黑森林蛋糕黑森林蛋糕黑森林蛋糕黑森林蛋糕</p>
                                <p class="price">￥58</p>
                                <p>月销<span>63</span>份&nbsp;&nbsp;&nbsp;赞<span>23</span></p>
                                <div class="num_jj">
                                    <img class="num_img1" src="images/spmx_hover_icon_jian.png" alt="">
                                    <input type="number" name="num" class="num_v" value="1">
                                    <img class="num_img2" src="images/spmx_hover_icon_jia.png" alt="">
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="g_list_img"><img src="images/wxwm_img03.png" alt=""></div>
                            <div class="g_right">
                                <p class="goods_name">黑森林蛋糕</p>
                                <p class="price">￥58</p>
                                <p>月销<span>63</span>份&nbsp;&nbsp;&nbsp;赞<span>23</span></p>
                                <div class="num_jj">
                                    <img class="num_img1" src="images/spmx_hover_icon_jian.png" alt="">
                                    <input type="number" name="num" class="num_v" value="1">
                                    <img class="num_img2" src="images/spmx_hover_icon_jia.png" alt="">
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="g_list_img"><img src="images/wxwm_img04.png" alt=""></div>
                            <div class="g_right">
                                <p class="goods_name">黑森林蛋糕</p>
                                <p class="price">￥58</p>
                                <p>月销<span>63</span>份&nbsp;&nbsp;&nbsp;赞<span>23</span></p>
                                <div class="num_jj">
                                    <img class="num_img1" src="images/spmx_hover_icon_jian.png" alt="">
                                    <input type="number" name="num" class="num_v" value="1">
                                    <img class="num_img2" src="images/spmx_hover_icon_jia.png" alt="">
                                </div>
                            </div>
                        </li>
                    </ul>
                    
                     
                    
                    
                    </div>
                </li>
                <li class="bottom_m_right_li animated fadeInUp">
                  <div class="bottom_m_right_top">饮品</div>
                    <div class="g_list">
                    <ul>
                        <li>
                            <div class="g_list_img"><img src="images/wxwm_img02.png" alt=""></div>
                            <div class="g_right">
                                <p class="goods_name">黑森林蛋糕</p>
                                <p class="price">￥58</p>
                                <p>月销<span>63</span>份&nbsp;&nbsp;&nbsp;赞<span>23</span></p>
                                <div class="num_jj">
                                    <img class="num_img1" src="images/spmx_hover_icon_jian.png" alt="">
                                    <input type="number" name="num" class="num_v" value="1">
                                    <img class="num_img2" src="images/spmx_hover_icon_jia.png" alt="">
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="g_list_img"><img src="images/wxwm_img03.png" alt=""></div>
                            <div class="g_right">
                                <p class="goods_name">黑森林蛋糕</p>
                                <p class="price">￥58</p>
                                <p>月销<span>63</span>份&nbsp;&nbsp;&nbsp;赞<span>23</span></p>
                                <div class="num_jj">
                                    <img class="num_img1" src="images/spmx_hover_icon_jian.png" alt="">
                                    <input type="number" name="num" class="num_v" value="1">
                                    <img class="num_img2" src="images/spmx_hover_icon_jia.png" alt="">
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="g_list_img"><img src="images/wxwm_img04.png" alt=""></div>
                            <div class="g_right">
                                <p class="goods_name">黑森林蛋糕</p>
                                <p class="price">￥58</p>
                                <p>月销<span>63</span>份&nbsp;&nbsp;&nbsp;赞<span>23</span></p>
                                <div class="num_jj">
                                    <img class="num_img1" src="images/spmx_hover_icon_jian.png" alt="">
                                    <input type="number" name="num" class="num_v" value="1">
                                    <img class="num_img2" src="images/spmx_hover_icon_jia.png" alt="">
                                </div>
                            </div>
                        </li>
                    </ul>
                    
                     
                    
                    
                    </div>
                </li>
                <li class="bottom_m_right_li animated fadeInUp">
                    <div class="bottom_m_right_top">翻糖</div>
                    <div class="g_list">
                    <ul>
                        <li>
                            <div class="g_list_img"><img src="images/wxwm_img02.png" alt=""></div>
                            <div class="g_right">
                                <p class="goods_name">黑森林蛋糕</p>
                                <p class="price">￥58</p>
                                <p>月销<span>63</span>份&nbsp;&nbsp;&nbsp;赞<span>23</span></p>
                                <div class="num_jj">
                                    <img class="num_img1" src="images/spmx_hover_icon_jian.png" alt="">
                                    <input type="number" name="num" class="num_v" value="1">
                                    <img class="num_img2" src="images/spmx_hover_icon_jia.png" alt="">
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="g_list_img"><img src="images/wxwm_img03.png" alt=""></div>
                            <div class="g_right">
                                <p class="goods_name">黑森林蛋糕</p>
                                <p class="price">￥58</p>
                                <p>月销<span>63</span>份&nbsp;&nbsp;&nbsp;赞<span>23</span></p>
                                <div class="num_jj">
                                    <img class="num_img1" src="images/spmx_hover_icon_jian.png" alt="">
                                    <input type="number" name="num" class="num_v" value="1">
                                    <img class="num_img2" src="images/spmx_hover_icon_jia.png" alt="">
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="g_list_img"><img src="images/wxwm_img04.png" alt=""></div>
                            <div class="g_right">
                                <p class="goods_name">黑森林蛋糕</p>
                                <p class="price">￥58</p>
                                <p>月销<span>63</span>份&nbsp;&nbsp;&nbsp;赞<span>23</span></p>
                                <div class="num_jj">
                                    <img class="num_img1" src="images/spmx_hover_icon_jian.png" alt="">
                                    <input type="number" name="num" class="num_v" value="1">
                                    <img class="num_img2" src="images/spmx_hover_icon_jia.png" alt="">
                                </div>
                            </div>
                        </li>
                    </ul>
                    
                     
                    
                    
                    </div>
                </li>
                <li class="bottom_m_right_li animated fadeInUp">
                   <div class="bottom_m_right_top">蛋糕</div>
                    <div class="g_list">
                    <ul>
                        <li>
                            <div class="g_list_img"><img src="images/wxwm_img02.png" alt=""></div>
                            <div class="g_right">
                                <p class="goods_name">黑森林蛋糕</p>
                                <p class="price">￥58</p>
                                <p>月销<span>63</span>份&nbsp;&nbsp;&nbsp;赞<span>23</span></p>
                                <div class="num_jj">
                                    <img class="num_img1" src="images/spmx_hover_icon_jian.png" alt="">
                                    <input type="number" name="num" class="num_v" value="1">
                                    <img class="num_img2" src="images/spmx_hover_icon_jia.png" alt="">
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="g_list_img"><img src="images/wxwm_img03.png" alt=""></div>
                            <div class="g_right">
                                <p class="goods_name">黑森林蛋糕</p>
                                <p class="price">￥58</p>
                                <p>月销<span>63</span>份&nbsp;&nbsp;&nbsp;赞<span>23</span></p>
                                <div class="num_jj">
                                    <img class="num_img1" src="images/spmx_hover_icon_jian.png" alt="">
                                    <input type="number" name="num" class="num_v" value="1">
                                    <img class="num_img2" src="images/spmx_hover_icon_jia.png" alt="">
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="g_list_img"><img src="images/wxwm_img04.png" alt=""></div>
                            <div class="g_right">
                                <p class="goods_name">黑森林蛋糕</p>
                                <p class="price">￥58</p>
                                <p>月销<span>63</span>份&nbsp;&nbsp;&nbsp;赞<span>23</span></p>
                                <div class="num_jj">
                                    <img class="num_img1" src="images/spmx_hover_icon_jian.png" alt="">
                                    <input type="number" name="num" class="num_v" value="1">
                                    <img class="num_img2" src="images/spmx_hover_icon_jia.png" alt="">
                                </div>
                            </div>
                        </li>
                    </ul>
                    
                     
                    
                    
                    </div>
                </li>
                <li class="bottom_m_right_li animated fadeInUp">
                    <div class="bottom_m_right_top">甜品</div>
                    <div class="g_list">
                    <ul>
                        <li>
                            <div class="g_list_img"><img src="images/wxwm_img02.png" alt=""></div>
                            <div class="g_right">
                                <p class="goods_name">黑森林蛋糕</p>
                                <p class="price">￥58</p>
                                <p>月销<span>63</span>份&nbsp;&nbsp;&nbsp;赞<span>23</span></p>
                                <div class="num_jj">
                                    <img class="num_img1" src="images/spmx_hover_icon_jian.png" alt="">
                                    <input type="number" name="num" class="num_v" value="1">
                                    <img class="num_img2" src="images/spmx_hover_icon_jia.png" alt="">
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="g_list_img"><img src="images/wxwm_img03.png" alt=""></div>
                            <div class="g_right">
                                <p class="goods_name">黑森林蛋糕</p>
                                <p class="price">￥58</p>
                                <p>月销<span>63</span>份&nbsp;&nbsp;&nbsp;赞<span>23</span></p>
                                <div class="num_jj">
                                    <img class="num_img1" src="images/spmx_hover_icon_jian.png" alt="">
                                    <input type="number" name="num" class="num_v" value="1">
                                    <img class="num_img2" src="images/spmx_hover_icon_jia.png" alt="">
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="g_list_img"><img src="images/wxwm_img04.png" alt=""></div>
                            <div class="g_right">
                                <p class="goods_name">黑森林蛋糕</p>
                                <p class="price">￥58</p>
                                <p>月销<span>63</span>份&nbsp;&nbsp;&nbsp;赞<span>23</span></p>
                                <div class="num_jj">
                                    <img class="num_img1" src="images/spmx_hover_icon_jian.png" alt="">
                                    <input type="number" name="num" class="num_v" value="1">
                                    <img class="num_img2" src="images/spmx_hover_icon_jia.png" alt="">
                                </div>
                            </div>
                        </li>
                    </ul>
                    
                     
                    
                    
                    </div>
                </li>
                
                
                
                
                
                
                
                
                <li class="bottom_m_right_li animated fadeInUp">
                    <div class="bottom_m_right_top">甜品</div>
                    <div class="g_list">
                    <ul>
                        <li>
                            <div class="g_list_img"><img src="images/wxwm_img02.png" alt=""></div>
                            <div class="g_right">
                                <p class="goods_name">黑森林蛋糕</p>
                                <p class="price">￥58</p>
                                <p>月销<span>63</span>份&nbsp;&nbsp;&nbsp;赞<span>23</span></p>
                                <div class="num_jj">
                                    <img class="num_img1" src="images/spmx_hover_icon_jian.png" alt="">
                                    <input type="number" name="num" class="num_v" value="1">
                                    <img class="num_img2" src="images/spmx_hover_icon_jia.png" alt="">
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="g_list_img"><img src="images/wxwm_img03.png" alt=""></div>
                            <div class="g_right">
                                <p class="goods_name">黑森林蛋糕</p>
                                <p class="price">￥58</p>
                                <p>月销<span>63</span>份&nbsp;&nbsp;&nbsp;赞<span>23</span></p>
                                <div class="num_jj">
                                    <img class="num_img1" src="images/spmx_hover_icon_jian.png" alt="">
                                    <input type="number" name="num" class="num_v" value="1">
                                    <img class="num_img2" src="images/spmx_hover_icon_jia.png" alt="">
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="g_list_img"><img src="images/wxwm_img04.png" alt=""></div>
                            <div class="g_right">
                                <p class="goods_name">黑森林蛋糕</p>
                                <p class="price">￥58</p>
                                <p>月销<span>63</span>份&nbsp;&nbsp;&nbsp;赞<span>23</span></p>
                                <div class="num_jj">
                                    <img class="num_img1" src="images/spmx_hover_icon_jian.png" alt="">
                                    <input type="number" name="num" class="num_v" value="1">
                                    <img class="num_img2" src="images/spmx_hover_icon_jia.png" alt="">
                                </div>
                            </div>
                        </li>
                    </ul>
                    
                     
                    
                    
                    </div>
                </li>
                
                
                
                
                
                
                
                
            </ul>
        </div>
    </div>
    
    
    
    
    
    
    
    
    
    
    
    
    
    <div class="bottom">
        <div class="bot_left_img">
                <div class="bot_num">1</div>
                <img src="images/icon_wxgouwuche.png" alt="">
        </div>
       ￥<span>12.00</span>
        <div class="bot_right"> 另需运送费1&nbsp;还差<span>10</span>元起送</div>
        
    </div>
    
    
    
    
    
    
    
    
    
    <script>
        
        $(function() {
            $(".bottom_m_left ul li").click(function() {
                $(".bottom_m_left ul li").removeClass("leftulli_on");
                $(".bottom_m_left ul li").addClass("leftulli_off");
                $(this).removeClass("leftulli_off");
                $(this).toggleClass("leftulli_on");
                $('.bottom_m_right_li').hide();
                if(!$('.bottom_m_right_li').eq($(this).index()).hasClass('fadeInUp')){
                    $('.bottom_m_right_li').eq($(this).index()).addClass('fadeInUp');
                }
                $('.bottom_m_right_li').eq($(this).index()).show();
            });
        });
        
        
        
        
        $(".num_v").blur(function() {
            var num = $(".num_v").val();
            if (!$.isNumeric(num)) {
                $(".num_v").val(1);
            }
        });

        $(function() {
            $(".num_img1").click(function() {
                var num = Number($(this).parents('.num_jj').find('.num_v').val());
                num = num - 1;
                if (num <= 0) {
                    num = 1;
                }
                $(this).parents('.num_jj').find('.num_v').val(num);
                count();
                return false;
            });
        });
        $(function() {
            $(".num_img2").click(function() {
                var num = Number($(this).parents('.num_jj').find('.num_v').val());
                num = num + 1;

                $(this).parents('.num_jj').find('.num_v').val(num);

                count();

                return false;
            });



        });

        $(function() {
            $(".top_m ul li").click(function() {
                $('.top_m ul li').removeClass('top_m_on')
                $(this).toggleClass("top_m_on");
            });

        });
    </script>
    
    
    
    <script type="text/javascript">
    $(function(){
        $(".goods_name").each(function(){
            var maxwidth=7;//设置最多显示的字数
            var text=$(this).text();
            if($(this).text().length>maxwidth){
                $(this).text($(this).text().substring(0,maxwidth));
                $(this).html($(this).html()+"...");//如果字数超过最大字数，超出部分用...代替，并且在后面加上点击展开的链接；

            };
        })
    })
</script>
</body>
</html>